<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-21 14:36:35
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-20 16:40:44
-->
<template>
  <div class="p-4">
    <Card :bordered="false">
      <InputSearch
        v-model:value="code"
        placeholder="请输入核销码"
        allow-clear
        class="input-box"
        @search="onSearch"
      />
      <div class="search-content-block" v-if="order.goods">
        <div class="verify-no-block">
          <div class="verify-info">
            <div class="verify-info-inner">
              <GoodsItem v-for="(goods, index) in order.goods" :key="index" :goods="goods" />
            </div>
            <div class="verify-info-desc">
              <p class="verify-info-desc-item">订单金额：{{ order.order_price }}</p>
              <p class="verify-info-desc-item">订单编号：{{ order.order_no }}</p>
              <p class="verify-info-desc-item">创建时间：{{ order.create_time }}</p>
              <p class="verify-info-desc-item">付款时间：{{ order.pay_time }}</p>
              <p class="verify-info-desc-item">
                订单状态：{{ order.state_text }}
                <a-button type="primary" @click="handleVerify">
                  {{ order.is_verify === 1 ? '订单已核销' : '确认使用' }}
                </a-button>
              </p>
            </div>
          </div>
        </div>
      </div>
      <Steps direction="vertical" size="small" :current="1" v-else>
        <Step
          title="搜索核销码"
          description="请顾客出示核销码并点击“核销台”， 扫描二维码或输入二维码上方的核销码"
        />
        <Step title="验证" description="提供有效期验证，其他信息请自行核对" />
        <Step title="验证完成" description="验证完成后，可在“核销记录”查看相关验证信息" />
      </Steps>
    </Card>
  </div>
</template>

<script setup lang="ts">
  import { createVNode, ref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  // // 数据模型
  import { OrderRecordModel } from '../model';

  // // 组件  ,Steps, Step,
  import { GoodsItem } from '../components/GoodsItem';
  import { Card, Modal,Steps, Input } from 'ant-design-vue';
  import { verifyDetail } from '/@/api/order/verify';
  import { VerifyDetailParam, VerifyType } from '/@/api/order/model/orderModel';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { overifyByCode } from '/@/api/order/event';
  const InputSearch = Input.Search;
  const Step = Steps.Step;
  // // 变量
  const code = ref<string>('');
  const order = ref<OrderRecordModel | any>({});

  // 搜索商品
  const onSearch = async () => {
    if (!code.value) return createMessage.warning('请输入核销码');
    let param = {
      verifyCode: code.value,
    } as VerifyDetailParam;
    let data = await verifyDetail(param);
    order.value = data.detail;
  };

  const handleVerify = () => {
    if (!code.value) return createMessage.warning('请输入核销码');
    Modal.confirm({
      title: () => '提示',
      icon: () => createVNode(ExclamationCircleOutlined),
      content: () => createVNode('div', { style: 'color:red;' }, '是否确定销核该订单'),
      onOk: () => {
        let param = { verifyCode: code.value } as VerifyType;
        overifyByCode(param)
          .then(() => {
            createMessage.success('修改成功');
            code.value = '';
          })
          .catch(() => {
            createMessage.error('修改失败');
          });
      },
    });
  };
</script>

<style lang="less" scoped>
  .input-box {
    width: 200px;
    margin-bottom: 20px;
  }

  .search-content-block {
    padding: 20px;
    border: 1px solid #e5e5e5;
    background-color: #fff;

    .verify-no-block {
      // padding: 20px;
      .verify-info {
        font-size: 14px;
        line-height: 30px;
        margin-bottom: 16px;
        color: #323233;

        .verify-info-inner {
          padding: 24px 16px 0;
          padding-bottom: 10px;
          overflow-y: overlay;
        }
      }

      .verify-info-desc {
        font-size: 14px;
        line-height: 30px;
        position: relative;
        margin: 0 16px 24px;
        padding-top: 16px;
        border-top: 1px solid #dcdee0;

        .verify-info-desc-item {
          color: #969799;
          line-height: 20px;
          margin: 8px 0;
          display: flex;
          flex-direction: row;
          width: 100%;
          justify-content: space-between;
        }
      }
    }
  }
</style>
